<script setup>
	import {
		ref
	} from 'vue';
	const classname = ref("");
	const classList = ref([]);
	const db = uniCloud.database();
	const selectedIds = ref([]); // 存储选中分类的ID
	// 获取列表
	const getClassify = async () => {
		let res = await db.collection("demo-classify")
			.orderBy("createTime desc")
			.field("name,status")
			.get();
		classList.value = res.result.data.map(item => ({
			...item, // 保留原有属性
			checked: false // 添加 checked 属性// 添加复选框状态
		}));
	}
	// 更新状态
	const switchChange = async (e, id) => {
		await db.collection("demo-classify")
			.doc(id)
			.update({
				status: e.detail.value
			})
	}
	// 全选/取消全选
	const toggleSelectAll = (e) => {
		const checked = e.detail.value;
		// forEach() 方法对遍历 classList.value 数组中的每个元素。将每个元素的 checked 属性设置为 checked 的值。
		//更新选择状态
		classList.value.forEach(item => item.checked = checked);
		updateSelectedIds();
	}
	// 更新选中ID列表
	const updateSelectedIds = () => {
		// filter() 方法创建classList.value数组拷贝中所有 checked 属性为 true 的元素，生成一个新数组。
		//map() 方法，会将筛选后的数组中的每个元素的 _id 属性提取出来，生成一个新数组。
		selectedIds.value = classList.value
			.filter(item => item.checked)
			.map(item => item._id);
	}
	//删除选中分类
	const batchRemove = async (e, id) => {
		// 没有选中
		if (selectedIds.value.length === 0) {
			return uni.showToast({
				title: "请选择要删除的分类",
				icon: "none"
			});
		}
		uni.showLoading({
			mask: true
		});
		let feed = await uni.showModal({
			title: `是否确认删除${selectedIds.value.length}个分类吗？`
		})
		// 点击取消 取消loading
		if (!feed.confirm) return uni.hideLoading();

		// 批量删除
		await Promise.all(
			selectedIds.value.map(id =>
				db.collection("demo-classify")
				.doc(id)
				.remove()
			)
		);

		uni.showToast({
			title: "删除成功",
			icon: "none"
		})
		// 清空选择框
		selectedIds.value = [];
		getClassify();
	}

	// 批量更新选中分类状态
	const batchUpdateStatus = async (status) => {
		if (selectedIds.value.length === 0) {
			return uni.showToast({
				title: "请选择要操作分类",
				icon: "none"
			});
		}

		uni.showLoading({
			mask: true
		});

		// 批量更新状态
		await Promise.all(
			selectedIds.value.map(id =>
				db.collection("demo-classify").doc(id).update({
					status
				})
			)
		);

		uni.showToast({
			title: `已${status ? '启用' : '禁用'}选中分类`,
			icon: "none"
		});
		getClassify();
	}

	//删除一条分类
	const handleRemove = async (id) => {
		uni.showLoading({
			mask: true
		});
		let feed = await uni.showModal({
			title: "是否确认删除"
		})
		// 点击取消 取消loading
		if (!feed.confirm) return uni.hideLoading();
		// let res = 
		await db.collection("demo-classify")
			.doc(id)
			.remove();

		uni.showToast({
			title: "删除成功",
			icon: "none"
		})
		getClassify();
	}
	// 新增
	const onConfirm = async () => {
		uni.showLoading();
		//let res =
		await db.collection("demo-classify")
			.add({
				name: classname.value
			})
		// 清空
		classname.value = "";
		uni.showToast({
			title: "添加成功",
			icon: "none"
		})
		getClassify();
	}

	getClassify();
</script>
<template>
	<view class="layout">
		<view class="add">
			<input class="ipt" type="text" v-model="classname" placeholder="请输入分类名称" @confirm="onConfirm">
		</view>

		<!-- 批量操作工具栏 -->
		<view class="batch-toolbar">
			<text>已选 {{ selectedIds.length }} 项</text>
			<button class="mini-btn" @click="batchUpdateStatus(true)" :disabled="selectedIds.length === 0">批量启用</button>
			<button class="mini-btn" @click="batchUpdateStatus(false)"
				:disabled="selectedIds.length === 0">批量禁用</button>
			<button class="mini-btn delete-btn" @click="batchRemove" :disabled="selectedIds.length === 0">批量删除</button>
		</view>

		<view class="list">

			<!-- 全选 -->
			<view class="select-all">
				<checkbox :checked=" classList.length > 0 && selectedIds.length === classList.length "
					@change="toggleSelectAll" />
				<text>全选</text>
			</view>


			<!-- 分类列表 -->
			<view class="item" v-for="item in classList" :key="item._id">
				<view>
					<checkbox :value="item._id" :checked="item.checked"
						@change="e => {item.checked = e.detail.value;updateSelectedIds(); }" />
				</view>

				<view class="name">{{item.name}}</view>

				<view class="status">
					<switch :checked="item.status" style="transform:scale(0.6)"
						@change="(e)=>switchChange(e,item._id)" />
				</view>

				<view class="remove">
					<uni-icons type="trash" size="26" @click="handleRemove(item._id)"></uni-icons>
				</view>

			</view>
		</view>

	</view>
</template>
<style lang="scss" scoped>
	.layout {
		padding: 30rpx;

		.add {
			margin-bottom: 30rpx;
			display: flex;
			gap: 20rpx;

			.ipt {
				width: 100%;
				border: 1px solid #eee;
				height: 70rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}

		.batch-toolbar {
			display: flex;
			align-items: center;
			padding: 15rpx 0;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #eee;

			text {
				flex: 1;
				font-size: 28rpx;
				color: #666;
			}

			.mini-btn {
				font-size: 24rpx;
				padding: 5rpx 15rpx;
				margin-left: 15rpx;
				border-radius: 8rpx;
				background-color: #f1f1f1;

				&.delete-btn {
					background-color: #ff5a5f;
					color: white;
				}
			}
		}


		.list {
			.select-all {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1px solid #f5f5f5;

				text {
					margin-left: 10rpx;
					font-size: 28rpx;
				}
			}
		}

		.item {
			display: flex;
			padding: 10rpx 0;
			align-items: center;
			justify-content: space-between;

			.name {
				color: #007AFF;
				flex: 1;
			}

			.status {
				width: 100rpx;
			}

			.remove {
				width: 100rpx;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>